<script setup lang="ts">/**
 * @title -
 * @author -qqz
 * @date -2024-03-12
 */
import {ref} from "vue";
import {useRouter} from "vue-router";
import {getUserInfo} from "@/api/apply.ts";

// vue3+vite 静态引入图片方式的写法 new URL('./assets/image/list/ico_car.png',import.meta.url).href
type Item = { id: number; txt: string; des: any, ico: any; }
type arrayItem = Item[]
// 图标套餐: https://www.iconfont.cn/collections/detail?spm=a313x.user_detail.i1.dc64b3430.529e3a81e45x7t&cid=47086
const listColumn = ref<arrayItem>([
  {id: 0, txt: '实名认证', des: '基础资料', ico: new URL('../../assets/image/list/ico_person.png', import.meta.url).href},
  {id: 1, txt: '车主专享', des: '提升额度', ico: new URL('../../assets/image/list/ico_car.png', import.meta.url).href},
  {id: 2, txt: '房屋专享', des: '提升额度', ico: new URL('../../assets/image/list/ico_home.png', import.meta.url).href},
]);


const router = useRouter();


/** 点击补充资料菜单项 */
const clickMenuItem = (item: any) => {
  switch (item.id) {
    case 0:
      router.push({name: 'person'})
      break

    case 1:
      router.push({name: 'car', query: {id: 123}})
      break

    case 2:
      router.push({name: 'house', query: {id: 123}})
      break
  }
}

export interface RootObject {
  id: number;
  userId: string;
  availableCredit: number;
  interestRate: number;
}


export interface RootObjectData {
  extend: RootObject;
}


let productData = ref<RootObject>();

/** 获取用户信息 */
getUserInfo().then((res) => {
  // console.log(res);
  productData.value = res.data.extend;
})

/**
 * 提交申请
 */
const submit = () => {
  // router.push({name: 'succeed'})

  router.push({name: 'applyLoan'})
}

</script>

<template>

  <!-- 申请成功 -->
  <div>

    <van-nav-bar
        title="鑫盛源"
        left-text=""/>

    <div class="card" style="margin-top: 10px;">
      <div style="width: 100%;text-align: center">
        <p>可用额度(元)</p>
        <p v-if="productData" style="font-size: 3rem;font-weight: bold">{{ productData.availableCredit }}</p>
        <p v-else style="font-size: 3rem;font-weight: bold">******</p>
        <p style="font-size: 12px" v-if="productData">年化利率(单利){{
            productData.interestRate
          }}%,1千元用一天需0.47元</p>
        <!--   单利指仅按贷款本金计算利息,本金所产生的利息不会再计算利息     -->
      </div>

      <van-button @click="submit" size="large" type="success" round block
                  native-type="submit">立即提现
      </van-button>
    </div>


    <!-- 补充车辆、房产信息、提升额度   -->
    <div
        class="van-fade-enter-active card"
        style=" justify-content:space-between; flex-wrap: wrap; display: flex;flex-direction: row;  margin-top: 10px;">

      <div style=" margin: 0 auto; width: 90%;  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; ">

        <div v-for="(item, index) in listColumn" :key="index" @click="clickMenuItem(item)"
             style=" border-radius: 10px;padding-bottom: 20px;padding-top: 10px; padding-left: 10px; background-color: #F8F9FB; ">

          <div style="display: flex;flex-direction: column;">
            <img style="width: 35px;vertical-align: middle; "
                 :src="item.ico">
            <span style="font-weight: 530;font-size: 12px; margin-top: 8px;color: #252930">{{ item.txt }}</span>
            <span style="font-size: 10px; margin-top: 8px;color: #81868B">{{ item.des }}</span>
          </div>

        </div>

      </div>

    </div>


  </div>

</template>


<style scoped>
/* Your styles here */

#index {
  width: 100%;
  height: 100%;
}

.card {
  width: 94%;
}
</style>
